<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>业务员推广二维码</title>
		<link rel="stylesheet" href="__AGENT__/css/iconfont.css" />
		<link rel="stylesheet" href="__AGENT__/css/css.css" />
		<style type="text/css">
			.payment_erweima canvas{width: 200px; height: 200px;}
		</style>
	</head>

	<body>		
		<div class="erweima_con">
				<div class="payment_conbox" id='payment_conbox'>
					<div class="erweim_bt">推广二维码</div>
					<div class="sherweimabox">
						<div class="payment_yhnam">{$data.name}</div>
						<div class="payment_shh">手机号码:{$data.mobile}</div>
						<div class="payment_erweima"  >
							<div id="qrcode"></div>
						</div>
						<ul class="erweima_bottom clearfix">
						</ul>
					</div>
					<div class="payment_info">
						<div class="left"><img src="__AGENT__/img/logo-ma.png"></div>
						<div class="right">
							<p>由<?php echo config('company_name') ?>提供技术支持</p>
							<p>客服热线：<?php echo config('service_phone') ?></p>
						</div>
					</div>
				</div>
				<div class="payment_butbox"><button type="button" onclick="savepic()" class="payment_but">保存二维码</button></div>
			</div>
			<div id ='cut_img' style="display: none;"></div>
	</body>
</html>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/layui/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script>
	var index = layer.load(0, {shade: false,time: 1.5 * 1000});
	$(".layui-layer-loading").css("left", "50%");
	var redirect_url = "{$data['redirect_url']}";
	 $("#qrcode").qrcode({
        render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text : redirect_url,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width : "180",               //二维码的宽度
        height : "180",              //二维码的高度
        background : "#ffffff",       //二维码的后景色
        foreground : "#000000",        //二维码的前景色
        src: '__OEM__/img/logomr.png'             //二维码中间的图片
    });
   
    setTimeout(function(){
		html2canvas($("#payment_conbox"), {
			 onrendered: function (canvas) {
			     var url = canvas.toDataURL(); //base64数据
			     var image = new Image();
			     image.src = url;
			     image.id = 'div_img';
			     $('#cut_img').append(image);
			   }
			});
	},1000);
</script>
<script>
//下载图片
function savepic() {
	var img_src = $('#div_img')[0].src;
	var type = 'png';
	// 下载后的问题名
	var filename = 'pic_' + (new Date()).getTime() + '.' + type;
	// download
	saveFile(img_src,filename);
	
}

/**
 * 在本地进行文件保存
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>